<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>QHD CSS Framework - 企户动Web前端框架</title>
<link rel="stylesheet" href="css/content.css" type="text/css" />
<link rel="stylesheet" href="css/grid.css" type="text/css" />

<link rel="stylesheet" href="css/style.css" type="text/css" />

<!--[if IE 6]>
    <script type="text/javascript" src="js/ie7.js"></script>			
<![endif]-->
</head>

<body>
<div id="wrap">
	
    <!-- S Top -->
    <div class="Top">
    	<!-- S top-toolbar -->
    	<div class="top-toolbar">
	    	<div class="page-width clearfix">
	        	<div class="logo"><a href="javascript:;">QHD CSS Framework</a></div>
                
                <!-- S nav -->
	            <div class="nav clearfix">
	            	<div class="main-nav float-left">
	                	<ul class="float-left clearfix">
                        	<li><a href="#Overview">概述</a></li>
	                    	<li><a href="#Grids">百分比多列网格</a></li>
	                        <li><a href="#Typography">静态内容排版布局</a></li>
	                    </ul>
	                </div>
                    
                    <div class="nav-right">
	                	<ul class="float-righ">
	                    	<li><a href="http://qihudong.chinagdcj.cn" target="_blank">关于企户动</a></li>
	                    </ul>
	                </div>
                    
	            </div>
                <!-- E nav -->               
	        </div>
        </div>
        <!-- E top-toolbar -->
    </div>
    <!-- E Top -->

	
    
    <!-- S Content -->
    <div class="Content">
    	<div class="page-width clearfix">
        
        <div id="Overview">
				<!-- S module -->
	            <div class="module">
	            	<div class="module-content">
		            	<div class="qhd-content">                        
			            	<h1>QHD CSS Framework</h1>
			                <p>是一个HTML、CSS前端框架，能够完美支持IE6~7在内的所有浏览器！它提供自适应宽度的百分比多列网格，可用于创建响应式设计的网站。并对静态内容排版布局中常用的标题、段落、列表、表格、按钮、图文混合排版等元素进行语义化、结构化，帮助网页设计师减少枯燥乏味的跨浏览器兼容性调试，让web开发更快速、轻松！</p>
			            </div>
	                </div>
	            </div>
	            <!-- E module -->
	            
	            
	            <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
	                    	文件目录结构
	                    	<span>在下载的压缩包中你只需把如下文件并按其结构拷贝到Web开发项目文件夹</span>
	                    </h2>
	                </div>
	            	<div class="module-content">
	                	<!-- S highlight -->
		            	<div class="highlight clearfix">
	                    	<pre>
QHDCSS/
├── css/
│    ├── content.css
│    └── grid.css
├── js/
│    └── ie7.js
└── images/
      ├── buttons/
      │    └── ie6/
      └── icon/</pre>
	                    </div>
	                    <!-- E highlight -->
                        
                        
                        <!-- S qhd-content -->
                        <div class="qhd-content">                                            
	                        <p>上面就是QHD CSS Framework的文件目录结构：content.css是静态内容排版样式；grid.css是百分比多列网格样式；ie7.js是让ie6支持子元素筛选；buttons文件夹是用来存放按钮背景图，其中ie6文件夹是存放用于兼容ie6的背景图；icon文件夹是存放图标列表所用的图标。</p>
	                        <p class="red-fonts">请注意：在下载的压缩包中 docs.html 文件只是QHD CSS Framework的文档介绍说明。</p>
                        </div>
                        <!-- E qhd-content -->
                        
		            </div>
	            </div>
	            <!-- E module -->
	            
	            
	            <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
	                    	如何引用QHD CSS Framework？
	                    	<span>除如下的引用外，你也可以用HTML5文档类型引用</span>
	                    </h2>
	                </div>
	            	<div class="module-content">
	                	<!-- S highlight -->
		            	<div class="highlight clearfix">
	                    	<pre><code class="html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
        &lt;title&gt;QHD CSS Framework - 企户动Web前端框架&lt;/title&gt;
        &lt;link rel="stylesheet" href="css/content.css" type="text/css" /&gt;		
        &lt;!--[if IE 6]&gt;
            &lt;script type="text/javascript" src="js/ie7.js"&gt;&lt;/script&gt;
        &lt;![endif]--&gt;
    &lt;/head&gt;
    &lt;body&gt;
    ……
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
	                    </div>
	                    <!-- E highlight -->                    
		            </div>
	                <div class="module-dividing"></div>
	            </div>
	            <!-- E module -->
            </div><!-- end of Overview -->
            
            
            
            <div id="Grids">
	            <!-- S module -->
	            <div class="module">            	
	            	<div class="module-content">
						<div class="qhd-content">
		                	<h1>百分比多列网格</h1>
			            	<p>QHD CSS Framework提供了自适应宽度的1列~5列百分比多列网格，它的列宽以及列间距都是使用百分比计算宽度而非像素。因此，你只需调整外层div宽度或者引用不同列数的多列，无需重新计算多列的宽度和列间距，以便于你创建响应式设计的网站。</p>
                        </div>
	                </div>
	            </div>
	            <!-- E module -->	            
	            
	            
	            <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
	                    	基本演示
	                    	<span>1列~5列</span>
	                    </h2>
	                </div>
	            	<div class="module-content">
	                	
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-2-1">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		  	<div class="col-2-1 last">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-3-1">
				  		  		<p class="col-num">1/3</p>
				  		  	</div>
                            <div class="col-3-1">
				  		  		<p class="col-num">1/3</p>
				  		  	</div>
				  		  	<div class="col-3-1 last">
				  		  		<p class="col-num">1/3</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-3-1">
				  		  		<p class="col-num">1/3</p>
				  		  	</div>                           
				  		  	<div class="col-3-2 last">
				  		  		<p class="col-num">2/3</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-4-1">
				  		  		<p class="col-num">1/4</p>
				  		  	</div>
                            <div class="col-4-1">
				  		  		<p class="col-num">1/4</p>
				  		  	</div>
                            <div class="col-4-1">
				  		  		<p class="col-num">1/4</p>
				  		  	</div>
				  		  	<div class="col-4-1 last">
				  		  		<p class="col-num">1/4</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-4-1">
				  		  		<p class="col-num">1/4</p>
				  		  	</div>                           
				  		  	<div class="col-4-3 last">
				  		  		<p class="col-num">3/4</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                           
                                              
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-5-1">
				  		  		<p class="col-num">1/5</p>
				  		  	</div>
                            <div class="col-5-1">
				  		  		<p class="col-num">1/5</p>
				  		  	</div>
                            <div class="col-5-1">
				  		  		<p class="col-num">1/5</p>
				  		  	</div>
                            <div class="col-5-1">
				  		  		<p class="col-num">1/5</p>
				  		  	</div>                           
				  		  	<div class="col-5-1 last">
				  		  		<p class="col-num">1/5</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-5-1">
				  		  		<p class="col-num">1/5</p>
				  		  	</div>                         
				  		  	<div class="col-5-4 last">
				  		  		<p class="col-num">4/5</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        <!-- S column -->
                        <div class="column">
				  			<div class="col-5-2">
				  		  		<p class="col-num">2/5</p>
				  		  	</div>                         
				  		  	<div class="col-5-3 last">
				  		  		<p class="col-num">3/5</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        <br />
                        <h5>
                        	代码示例
                        	<span class="note">最后一列必须加上last的类名</span>
                        </h5>
                        <!-- S highlight -->
		            	<div class="highlight clearfix">
	                    	<pre><code class="html">&lt;div class="column"&gt;
    &lt;div class="col-2-1"&gt;
        ……
    &lt;/div&gt;
    &lt;div class="col-2-1 last"&gt;
        ……
    &lt;/div&gt;
&lt;/div&gt;       	</code></pre>
	                    </div>
	                    <!-- E highlight -->
                        
	                </div>
	            </div>
	            <!-- E module -->
            
            	 <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
	                    	列间距
                            <span>有四种列间距：0%(marg-per0)、2%(marg-per2)、3%(marg-per3)、4%(marg-per4)、5%(marg-per5)。其中3%为默认列间距</span>
	                    </h2>
	                </div>
	            	<div class="module-content">
	                	
                        <!-- S column -->
                        <div class="column marg-per0">
				  			<div class="col-2-1">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>                           
				  		  	<div class="col-2-1 last">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        <!-- S column -->
                        <div class="column marg-per2">
				  			<div class="col-2-1">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>                           
				  		  	<div class="col-2-1 last">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        <!-- S column -->
                        <div class="column marg-per3">
				  			<div class="col-2-1">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>                           
				  		  	<div class="col-2-1 last">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        <!-- S column -->
                        <div class="column marg-per4">
				  			<div class="col-2-1">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>                           
				  		  	<div class="col-2-1 last">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        <!-- S column -->
                        <div class="column marg-per5">
				  			<div class="col-2-1">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>                           
				  		  	<div class="col-2-1 last">
				  		  		<p class="col-num">1/2</p>
				  		  	</div>
				  		</div>
                        <!-- S column -->
                        
                        
                        
                        <br />
                        <h5>
                        	代码示例
                        	<span class="note">在class类名为column的div中额外在加多一个列边距的class。提示：默认列边距可不加。</span>
                        </h5>
                        <!-- S highlight -->
		            	<div class="highlight clearfix">
	                    	<pre><code class="html">&lt;div class="column marg-per0"&gt;
    &lt;div class="col-2-1"&gt;
        ……
    &lt;/div&gt;
    &lt;div class="col-2-1 last"&gt;
        ……
    &lt;/div&gt;
&lt;/div&gt;       	</code></pre>
	                    </div>
	                    <!-- E highlight -->
                        
	                </div>
	            	<div class="module-dividing"></div>
                </div>
	            <!-- E module -->
            	
            </div><!-- end of Grids -->
            
            
            
            
            
            <div id="Typography">
            	<!-- S module -->
	            <div class="module">            	
	            	<div class="module-content">
                    	<div class="qhd-content">
		                	<h1>静态内容排版布局</h1>
			            	<p>QHD CSS Framework对静态内容排版布局中常用的标题、段落、列表、表格、按钮、图文混合排版等元素进行语义化、结构化，提供风格一致的外观和体验，帮助网页设计师减少枯燥乏味的跨浏览器兼容性调试，无需再花费额外时间，让web开发更迅速、轻松！。</p>
	                        <p class="red-fonts">请注意：为了防止对页面其他排版布局和样式造成影响，在所有的静态内容排版布局元素都加了class类名为qhd-content的div父级。</p>
                        </div>
	                </div>
	            </div>
	            <!-- E module -->
            
            	
                <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
                        	基础元素
                            <span>标题（h1~h6）、段落（p）</span>             	
	                    </h2>
	                </div>
	            	<div class="module-content">
                    	<!-- S qhd-content -->
                    	<div class="qhd-content">
		                	<h1>我是h1标题</h1>
	                        <h2>我是h2标题</h2>
	                        <h3>我是h3标题</h3>
	                        <h4>我是h4标题</h4>
	                        <h5>我是h5标题</h5>
	                        <h6>我是h6标题</h6>
                            <p>我是p段落文字</p>
                        </div>
                        <!-- E qhd-content -->
                        
                        <br />
                        <h5>
                        	代码示例                        	
                        </h5>
                        <!-- S highlight -->
		            	<div class="highlight clearfix">
	                    	<pre><code class="html">&lt;h1&gt;我是h1标题&lt;/h1&gt;
&lt;h2&gt;我是h2标题&lt;/h2&gt;
&lt;h3&gt;我是h3标题&lt;/h3&gt;
&lt;h4&gt;我是h4标题&lt;/h4&gt;
&lt;h5&gt;我是h5标题&lt;/h5&gt;
&lt;h6&gt;我是h6标题&lt;/h6&gt;
&lt;p&gt;我是p段落文字&lt;/p&gt;</code></pre>
	                    </div>
	                    <!-- E highlight -->
                        
	                </div>
	            </div>
	            <!-- E module -->
                
                
                <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
	                    	列表	                    	
	                    </h2>
	                </div>
	            	<div class="module-content">
                    	<div class="column">
						    <div class="col-3-1">
						    	<!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<h4>无序列表</h4>
                                    <ul>
                                    	<li>无序列表项01</li>
                                        <li>无序列表项01</li>
                                        <li>
                                        	无序列表项03
                                        	<ul>
												<li>二级无序列表项01</li>
											  	<li>
                                                	二级无序列表项02
													<ul>
												  		<li>三级无序列表项01</li>
												  		<li>三级无序列表项02</li>
													</ul>
											  	</li>
											</ul>
                                        </li>
                                    </ul>
		                        </div>
		                        <!-- E qhd-content -->
                                
                                <br />
		                        <h5>
		                        	代码示例                        	
		                        </h5>
		                        <!-- S highlight -->
				            	<div class="highlight clearfix">
			                    	<pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;ul&gt;
        &lt;li&gt;无序列表项01&lt;/li&gt;
        &lt;li&gt;无序列表项01&lt;/li&gt;    
    &lt;/ul&gt;
&lt;/div&gt;</code></pre>
			                    </div>
			                    <!-- E highlight -->                                
                                
						    </div>
                            <div class="col-3-1">
						        <!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<h4>有序列表</h4>
                                    <ol>
                                    	<li>有序列表项01</li>
                                        <li>有序列表项01</li>
                                        <li>
                                        	有序列表项03
                                        	<ol>
												<li>二级有序列表项01</li>
											  	<li>
                                                	二级有序列表项02
													<ol>
												  		<li>三级有序列表项01</li>
												  		<li>三级有序列表项02</li>
													</ol>
											  	</li>
											</ol>
                                        </li>
                                    </ol>
		                        </div>
		                        <!-- E qhd-content -->
                                
                                <br />
		                        <h5>
		                        	代码示例                        	
		                        </h5>
		                        <!-- S highlight -->
				            	<div class="highlight clearfix">
			                    	<pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;ol&gt;
        &lt;li&gt;有序列表项01&lt;/li&gt;
        &lt;li&gt;有序列表项01&lt;/li&gt;    
    &lt;/ol&gt;
&lt;/div&gt;</code></pre>
			                    </div>
			                    <!-- E highlight -->
                        
						    </div>
						    <div class="col-3-1 last">
                            	<!-- S qhd-content -->
		                        <div class="qhd-content">
							        <h4>定义列表</h4>
	                                <dl>
	                                	<dt>我是定义列表的标题</dt>
	                                    <dd>我是定义列表的描述……</dd>
	                                    <dd>我是定义列表的描述……</dd>
	                                </dl>
                                </div>
                                <!-- E qhd-content -->
                                
                                <br />
                                <br />
                                <br />
                                <br />
		                        <h5>
		                        	代码示例                        	
		                        </h5>
		                        <!-- S highlight -->
				            	<div class="highlight clearfix">
			                    	<pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;dl&gt;
        &lt;dt&gt;我是定义列表的标题&lt;/dt&gt;
        &lt;dd&gt;我是定义列表的描述……&lt;/dd&gt;
        &lt;dd&gt;我是定义列表的描述……&lt;/dd&gt;
    &lt;/dl&gt;
&lt;/div&gt;</code></pre>
			                    </div>
			                    <!-- E highlight -->
                                
						    </div>
						</div>
                        
                        <br />
                        
                        <div class="column">
						    <div class="col-3-1">
						    	<!-- S qhd-content -->
		                        <div class="qhd-content">
                                    <ul class="iconlist iconlist-download">
										<li>图标列表 向下箭头</li>
									  	<li>图标列表 向下箭头</li>
									  	<li>图标列表 向下箭头</li>
								  	</ul>
                                    
                                    <ul class="iconlist iconlist-arrow">
										<li>图标列表 箭头</li>
							  			<li>图标列表 箭头</li>
							  			<li>图标列表 箭头</li>
						  			</ul>
                                    
                                    <ul class="iconlist iconlist-pen">
										<li>图标列表 笔</li>
										<li>图标列表 笔</li>
										<li>图标列表 笔</li>
									</ul>
                                    
		                        </div>
		                        <!-- E qhd-content -->                                
                             
						    </div>
                            <div class="col-3-1">
						        <!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<ul class="iconlist iconlist-check">
										<li>图标列表 打钩</li>
										<li>图标列表 打钩</li>
										<li>图标列表 打钩</li>
									</ul>
								
									<ul class="iconlist iconlist-del">
										<li>图标列表 红叉</li>
										<li>图标列表 红叉</li>
										<li>图标列表 红叉</li>
									</ul>
								
									<ul class="iconlist iconlist-light">
										<li>图标列表 提示</li>
										<li>图标列表 提示</li>
										<li>图标列表 提示</li>
									</ul>
		                        </div>
		                        <!-- E qhd-content -->
                        
						    </div>
						    <div class="col-3-1 last">
                            	<!-- S qhd-content -->
		                        <div class="qhd-content">
							       <ul class="iconlist iconlist-delta">
										<li>图标列表 小三角形</li>
										<li>图标列表 小三角形</li>
										<li>图标列表 小三角形</li>
									</ul>
								  
									<ul class="iconlist iconlist-dot">
										<li>图标列表 右尖括号</li>
										<li>图标列表 右尖括号</li>
										<li>图标列表 右尖括号</li>
									</ul>
								  
									<ul class="iconlist iconlist-favicon">
										<li>图标列表 五角星</li>
										<li>图标列表 五角星</li>
										<li>图标列表 五角星</li>
									</ul>
                                </div>
                                <!-- E qhd-content -->
                                
						    </div>
						</div>
                        
	                </div>
	            </div>
	            <!-- E module -->
                
                
                <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>
	                    	表格 	                    	
	                    </h2>
	                </div>
	            	<div class="module-content">
                    	<!-- S qhd-content -->
                    	<div class="qhd-content">
                        	<h5>1、默认表格样式</h5>
                            <table cellspacing="0" class="table">
								<thead>
									<tr>
								  		<th>电视剧</th>
								  		<th>类型</th>
								  		<th>上映年代</th>
									</tr>
								</thead>
                                <tbody>
									<tr>
									  	<td>爱情公寓</td>
									  	<td>都市爱情喜剧</td>
									  	<td>2010</td>
									</tr>
									<tr>
									  	<td>神探伽俐略</td>
									  	<td>推理探案</td>
									  	<td>2008</td>
									</tr>
									<tr>
									  	<td>生活大爆炸</td>
									  	<td>都市喜剧</td>
										<td>2007</td>
									</tr>
                            	</tbody>
							</table>
                        </div>
                        <!-- E qhd-content -->
                        <h5>
                            代码示例                        	
                        </h5>
                        <!-- S highlight -->
                        <div class="highlight clearfix">
                            <pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;table cellspacing="0" class="table"&gt;
        &lt;thead&gt;
            ……
        &lt;/thead&gt;
        &lt;tbody&gt;
            ……
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
						</div>
                        <!-- E highlight -->
                        
                        
                        <br />
                        <!-- S qhd-content -->
                    	<div class="qhd-content">
                        	<h5>2、背景交替的表格</h5>
                            <table cellspacing="0" class="table table-striped">
								<thead>
									<tr>
								  		<th>电视剧</th>
								  		<th>类型</th>
								  		<th>上映年代</th>
									</tr>
								</thead>
                                <tbody>
									<tr>
									  	<td>爱情公寓</td>
									  	<td>都市爱情喜剧</td>
									  	<td>2010</td>
									</tr>
									<tr>
									  	<td>神探伽俐略</td>
									  	<td>推理探案</td>
									  	<td>2008</td>
									</tr>
									<tr>
									  	<td>生活大爆炸</td>
									  	<td>都市喜剧</td>
										<td>2007</td>
									</tr>
                            	</tbody>
							</table>
                        </div>
                        <!-- E qhd-content -->
                        <h5>
                            代码示例                        	
                        </h5>
                        <!-- S highlight -->
                        <div class="highlight clearfix">
                            <pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;table cellspacing="0" class="table table-striped"&gt;
        &lt;thead&gt;
            ……
        &lt;/thead&gt;
        &lt;tbody&gt;
            ……
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
						</div>
                        <!-- E highlight -->
                        
                        
                        <br />
                        <!-- S qhd-content -->
                    	<div class="qhd-content">
                        	<h5>3、有边线的表格</h5>
                            <table cellspacing="0" class="table table-striped table-bordered">
								<thead>
									<tr>
								  		<th>电视剧</th>
								  		<th>类型</th>
								  		<th>上映年代</th>
									</tr>
								</thead>
                                <tbody>
									<tr>
									  	<td>爱情公寓</td>
									  	<td>都市爱情喜剧</td>
									  	<td>2010</td>
									</tr>
									<tr>
									  	<td>神探伽俐略</td>
									  	<td>推理探案</td>
									  	<td>2008</td>
									</tr>
									<tr>
									  	<td>生活大爆炸</td>
									  	<td>都市喜剧</td>
										<td>2007</td>
									</tr>
                            	</tbody>
							</table>
                        </div>
                        <!-- E qhd-content -->
                        <h5>
                            代码示例                        	
                        </h5>
                        <!-- S highlight -->
                        <div class="highlight clearfix">
                            <pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;table cellspacing="0" class="table table-striped table-bordered"&gt;
        &lt;thead&gt;
            ……
        &lt;/thead&gt;
        &lt;tbody&gt;
            ……
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
						</div>
                        <!-- E highlight -->
                        
                        
                        <br />
                        <!-- S qhd-content -->
                    	<div class="qhd-content">
                        	<h5>4、第一列是标题的表格</h5>
                            <table cellspacing="0" class="table table-bordered table-col">
								<thead>
									<tr>
								  		<th>电视剧</th>
								  		<th>类型</th>
								  		<th>上映年代</th>
									</tr>
								</thead>
                                <tbody>
									<tr>
									  	<td>爱情公寓</td>
									  	<td>都市爱情喜剧</td>
									  	<td>2010</td>
									</tr>
									<tr>
									  	<td>神探伽俐略</td>
									  	<td>推理探案</td>
									  	<td>2008</td>
									</tr>
									<tr>
									  	<td>生活大爆炸</td>
									  	<td>都市喜剧</td>
										<td>2007</td>
									</tr>
                            	</tbody>
							</table>
                        </div>
                        <!-- E qhd-content -->
                        <h5>
                            代码示例                        	
                        </h5>
                        <!-- S highlight -->
                        <div class="highlight clearfix">
                            <pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;table cellspacing="0" class="table table-bordered table-col"&gt;
        &lt;thead&gt;
            ……
        &lt;/thead&gt;
        &lt;tbody&gt;
            ……
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
						</div>
                        <!-- E highlight -->
                        
                        
                        <br />
                        <!-- S qhd-content -->
                    	<div class="qhd-content">
                        	<h5>5、第一行和第一列都是标题的表格</h5>
                            <table cellspacing="0" class="table table-bordered table-row">
								<thead>
									<tr>
								  		<th>电视剧</th>
								  		<th>类型</th>
								  		<th>上映年代</th>
									</tr>
								</thead>
                                <tbody>
									<tr>
									  	<th>爱情公寓</th>
									  	<td>都市爱情喜剧</td>
									  	<td>2010</td>
									</tr>
									<tr>
									  	<th>神探伽俐略</th>
									  	<td>推理探案</td>
									  	<td>2008</td>
									</tr>
									<tr>
									  	<th>生活大爆炸</th>
									  	<td>都市喜剧</td>
										<td>2007</td>
									</tr>
                            	</tbody>
							</table>
                        </div>
                        <!-- E qhd-content -->
                        <h5>
                            代码示例                        	
                        </h5>
                        <!-- S highlight -->
                        <div class="highlight clearfix">
                            <pre><code class="html">&lt;div class="qhd-content"&gt;
    &lt;table cellspacing="0" class="table table-bordered table-row"&gt;
        &lt;thead&gt;
            ……
        &lt;/thead&gt;
        &lt;tbody&gt;
            ……
        &lt;/tbody&gt;
    &lt;/table&gt;
&lt;/div&gt;</code></pre>
						</div>
                        <!-- E highlight -->
                    </div>    
                        
	            </div>
	            <!-- E module -->
                
                
                <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>按钮</h2>
	                </div>
	            	<div class="module-content">
                    	
                        <div class="column">
						    <div class="col-3-1">
						    	<!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<h4>小尺寸按钮</h4>
                                    <p><a href="javascript:;" class="btn-small btn-small-norm"><span>标准按钮</span></a></p>
				                    <p><a href="javascript:;" class="btn-small btn-small-main"><span>主要按钮</span></a></p>
				                    <p><a href="javascript:;" class="btn-small btn-small-assist"><span>辅助按钮</span></a></p>
				                    <p><a href="javascript:;" class="btn-small btn-small-match"><span>搭配按钮</span></a></p>
		                        </div>
		                        <!-- E qhd-content -->
                                
						    </div>
                            <div class="col-3-1">
						        <!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<h4>默认按钮</h4>
                                    <p><a href="javascript:;" class="btn-medium btn-medium-norm"><span>标准按钮</span></a></p>
							        <p><a href="javascript:;" class="btn-medium btn-medium-main"><span>主要按钮</span></a></p>
							        <p><a href="javascript:;" class="btn-medium btn-medium-assist"><span>辅助按钮</span></a></p>
							        <p><a href="javascript:;" class="btn-medium btn-medium-match"><span>搭配按钮</span></a></p>
		                        </div>
		                        <!-- E qhd-content -->                                
                               
						    </div>
						    <div class="col-3-1 last">
                            	<!-- S qhd-content -->
		                        <div class="qhd-content">
							        <h4>大尺寸按钮</h4>
	                                <p><a href="javascript:;" class="btn-large btn-large-norm"><span>标准按钮</span></a></p>
			                        <p><a href="javascript:;" class="btn-large btn-large-main"><span>主要按钮</span></a></p>
			                        <p><a href="javascript:;" class="btn-large btn-large-assist"><span>辅助按钮</span></a></p>
			                        <p><a href="javascript:;" class="btn-large btn-large-match"><span>搭配按钮</span></a></p>
                                </div>
                                <!-- E qhd-content -->
                                
                                
						    </div>
						</div>
                        
                    </div>
                </div>
	            <!-- E module -->
                
                
                <!-- S module -->
	            <div class="module">
	            	<div class="module-title clearfix">
	                	<h2>图文混合排版</h2>
	                </div>
	            	<div class="module-content">
                    	
                        <div class="column">
						    <div class="col-2-1">
						    	<!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<div class="typo">              
										<a href="#"><img class="typo_img" src="images/upload/qhd-img.jpg" alt="企户动" /></a>
									  	<div class="typo_text">
									  		<h5>免费的网站外观</h5>        
									  		<p>HAL基于html属性，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，就可以自动转换成动态内容只要在静态的html。</p>
									  	</div>
								   	</div>
		                        </div>
		                        <!-- E qhd-content -->
                                
						    </div>                           
						    <div class="col-2-1 last">
                            	<!-- S qhd-content -->
		                        <div class="qhd-content">
							        <div class="typo">        
										<a href="#"><img class="typo_img imgtoright" src="images/upload/qhd-img.jpg" alt="企户动" /></a>
									  	<div class="typo_text">   
									  		<h5>定制专属的企业网站的外观</h5>     
									  		<p>HAL基于html属性，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，就可以自动转换成动态内容只要在静态的html。</p>
									  	</div>
									</div>
                                </div>
                                <!-- E qhd-content -->                                
                                
						    </div>
						</div><!-- end of column -->
                        
                        
                        <br />
                        
                        <div class="column">
						    <div class="col-2-1">
						    	<!-- S qhd-content -->
		                        <div class="qhd-content">
				                	<div class="typo">              
										<a href="#"><img class="typo_img" src="images/upload/qhd-img.jpg" alt="企户动" /></a>
									  	<h5>模板属性语言HAL</h5>       
									  	<p>HAL基于html属性，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，就可以自动转换成动态内容只要在静态的html。</p>
								   	</div>
		                        </div>
		                        <!-- E qhd-content -->
                                
						    </div>                           
						    <div class="col-2-1 last">
                            	<!-- S qhd-content -->
		                        <div class="qhd-content">
							        <div class="typo">        
										<a href="#"><img class="typo_img imgtoright" src="images/upload/qhd-img.jpg" alt="企户动" /></a>
									  	<h5>HAL Dreamweaver插件</h5>
                                        <p>HAL基于html属性，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容只要在静态的html标记之间加入企户动的HAL属性标记，就可以自动转换成动态内容，用Dreamweaver之类的html编辑器就可以很友好地看到页面效果，就可以自动转换成动态内容只要在静态的html。</p>
									</div>
                                </div>
                                <!-- E qhd-content -->                                
                                
						    </div>
						</div><!-- end of column -->
                         
                        
                    </div>
                </div>
	            <!-- E module -->
                 
                
                
            
            </div><!-- end of Typography -->
            
            
            
            
        </div>
    </div>
    <!-- E Content -->
    
    
    
    <!-- S Bottom -->
    <div class="Bottom">
    	<div class="page-width clearfix">
        	<a href="#" class="float-right">返回顶部</a>
            <div class="qhd-content">
            	<p>
	            	我们倾注于语义化、结构化网页排版布局元素，帮助网页设计师减少枯燥乏味的跨浏览器兼容性调试，提高Web项目开发的效率！<br />
                    如有问题和建议，请<a href="http://qihudong.chinagdcj.cn/resourcesDownload/atccategoryid_451_language_zh-CN" target="_blank">给我们留言</a>或者联系企户动网页设计师QQ：<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=1690704269&amp;site=qq&amp;menu=yes">1690704269</a>，<br />
                	QHD CSS Framework是由<a href="http://qihudong.chinagdcj.cn" target="_blank">企户动</a>支持开发！ 企户动版权所有.
	            </p>
            </div>
        </div>
    </div>
    <!-- S Bottom -->
    
</div>
</body>
</html>